<template>
	<view>
		<!-- 自定义导航 -->
		<orderNavBar :tabBars="tabBars" :tabIndex="tabIndex" @chang-tab="changTab"></orderNavBar>		
		<!--订单状态-->
		<view class="myorder-search-fixed">
			<view class="myorder-tips">
				<text>结算的订单将在下月的二十五号到余额</text>
			</view>
			<view class="myorder-search-button">
				<view @click="click_order_status('')"><text :class="order_params.status==''?'active':''">所有订单</text></view>
				<view @click="click_order_status('1,2,4')"><text :class="order_params.status=='1,2,4'?'active':''">即将结算</text></view>
				<view @click="click_order_status('6')"><text :class="order_params.status=='6'?'active':''">已结算</text></view>
				<view @click="click_order_status('3,5,11')"><text :class="order_params.status=='3,5,11'?'active':''">已失效</text></view>
			</view>
			
			<!--订单数-->
			<!-- <view class="myorder-number-fixed">
				<view class="myorder-number">
					<view class="myorder-number-item">
						<view class="myorder-name">订单数</view>
						<view class="myorder-num">1</view>
					</view>
					<view class="myorder-number-item">
						<view class="myorder-name">付款金额</view>
						<view class="myorder-num">￥1</view>
					</view>
					<view class="myorder-number-item">
						<view class="myorder-name">订单数</view>
						<view class="myorder-num">￥1</view>
					</view>
				</view>
			</view> -->
		</view>
		<view class="order-nav-list"></view>
		
		<!-- 列表 -->
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{height:swiperheight+'px'}" :current="tabIndex" @change="tabChange">
				<swiper-item>
					<orderNavList :orderlist="orderlist" :tabIndex="tabIndex" @chang-tab="changTab"></orderNavList>
					<uni-load-more :status="more"></uni-load-more>
				</swiper-item>
				
				<swiper-item>
					<orderNavList :orderlist="orderlist" :tabIndex="tabIndex" @chang-tab="changTab"></orderNavList>
					<uni-load-more :status="more"></uni-load-more>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more'
	import tools from "../../common/tools"
	import apiorder from '../../common/api/order';
	import orderNavList from "../../components/myorder/order-nav-list"
	import orderNavBar from "../../components/myorder/order-nav-bar"
	import loadMore from "../../components/common/load-more"
	import commonList from "../../components/common/common-list"
	export default {
		data() {
			return {
				more:'loading',
				swiperheight:150,//屏幕高度
				tabIndex:0,//tab索引 1自购 2粉丝
				tabBars:[
					{name:"我的订单"},
					{name:"粉丝订单"}
				],				
				orderlist:[],//订单列表
				
				order_params:{
					status:'',//状态
					page:1,	//页码
					data:'',//时间
					commission_type :1,
				}
				
			}
		},
		onShow(){
			tools.is_has_login('hasLogin')
			this.order_list();
		},
		onLoad() {
			
		},
		components:{
			orderNavBar,
			commonList,
			loadMore,
			orderNavList,
			uniLoadMore
		},
		//上拉加载更多
		onReachBottom:function() {
			this.goods_more_search()
		},
		methods: {
			//获取点击状态
			click_order_status(status){
				this.order_params.status=status
				this.orderlist=[]
				this.order_list()
			},			
			
			//点击切换
			changTab(index){
				this.tabIndex = index;
				if(index == 0){
					this.order_params.commission_type=1
				}else{
					this.order_params.commission_type=2
				}
				this.order_list();
			},
			
			
			//上拉加载更多
			goods_more_search(){
				this.order_params.page = this.order_params.page+1
				apiorder.orderlist(this.order_params).then(res =>{
					if(res.code == 1){
						if(res.data.items.length != 0){
							this.orderlist = this.orderlist.concat(res.data.items);//合并数组
							let current_height = (res.data.items.length) * 150
							this.swiperheight = this.swiperheight+current_height
							this.more='loading'
						}else{
							this.more='noMore'
						}
					}else{
						this.more='noMore'
					}
				}).catch(cateres =>{
					
				});
			},
			
			
			
			
			//订单列表
			order_list(){
				apiorder.orderlist(this.order_params).then(res =>{
					if(res.code == 1){
						if(res.data.items.length != 0){
							this.swiperheight = (res.data.items.length) * 150+50
							this.orderlist=res.data.items
							if(this.swiperheight<600){
								this.more='noMore'
							}else{
								this.more='loading'
							}
						}else{
							this.more='noMore'
						}
					}else{
						this.swiperheight = 50
						this.more='noMore'
					}
				}).catch(cateres =>{
					
				});
			},
			
			
			//滑动切换
			tabChange(e){
				this.swiperheight=0
				this.tabIndex = e.detail.current;
				this.order_params.status=''
				this.order_params.page=1
				this.orderlist=[]
				if(this.tabIndex == 0){
					this.order_params.commission_type=1
				}else{
					this.order_params.commission_type=2
				}
				this.order_list()
			},
			// 选择导航栏事件
			changeTab(index){
				this.current = index
				console.log('changeTab')
			},
			// 滑动内容页事件
			changeSwiper(e) {
				this.current = e.detail.current
				this.$emit('changeNavIndex', e.detail.current)
			},
			// 下拉刷新事件
			refresher() {
				var that = this
				that.refreshering = true
				console.log('下拉刷新')
				setTimeout(function() {
					that.refreshering = false
					console.log('刷新成功')
				},2000)
			}
		}
	}
</script>

<style scoped>
	.order-nav-list{
		width:100%;
		height:160upx;
	}
	
	.active{
		background: #F76260!important;
		color:#FFFFFF;
	}
	.myorder-search-fixed{
		position: fixed;
		width:100%;
		z-index:100;
		background-color:#F5F5F5;
	}
	.myorder-tips{
		background-color:#FFFFFF;
		padding:10upx 0;
	}
	.myorder-tips>text{
		color:#F76260;
		padding-left:20upx;
	}
	.myorder-tips>text>text{
		padding-left:20upx;
	}
	.myorder-number-fixed{
		width:100%;
		top:360upx;
		z-index:100;
	}
	
	.myorder-search-button{
		width:100%;
	    display: flex;
	    flex-direction: row;
	    flex-wrap: wrap;
		flex:1;
		padding-top:20upx;
		background-color:#F5F5F5;
	}	
	
	.myorder-search-button>view{
		width:25%;
		text-align:center;
		height:80upx;
		line-height:80upx;
	}
	.myorder-search-button>view>text{
		padding:15upx 30upx;
		border-radius:20upx;
		background-color:#FFFFFF;
	}
	
	.myorder-number{
		width:100%;
		background:#F5F5F5;
		padding-top:15upx;
	    display: flex;
	    flex-direction: row;
	    flex-wrap: wrap;
	}
	.myorder-number-item{
		background-color:#FFFFFF;
		width:33%;
		flex: 1;
		text-align:center;
	}
	.myorder-number>view:last-child>view:last-child{
		color:#F76260;
	}
	.myorder-number-item>view{
		height:80upx;
		line-height:80upx;
	}
	.myorder-number-item>view:first-child{
		color:#514D4C;
	}
	.myorder-number-item>view:last-child{
		font-size:40upx;
	}
	
</style>
